<template>
	<view class="transparent">
		<!-- 	<view class="transparent-top">
			<view class="transparent-top-title">透明车况</view>
			<view class="transparent-top-text">一车一况一价精准掌握</view>
			
		</view> -->
			
            <view>
				<view class="tmck">
					透明车况
				</view>
                <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="0">
                    <view id="demo1" class="scroll-view-item_H ">
						<view class="transparent-content">
							<navigator class="transparent-content-li" hover-class="none" url="/pagesB/carReport/carReport">
								<view class="transparent-content-item">
									<view class="transparent-content-item-icon">
										<image src="../../static/tab/car_report.png" mode="aspectFit"></image>
									</view>
									<view class="transparent-content-item-text">车辆报告</view>
								</view>
							</navigator>
							<!-- 可以跳转 -->
							<!-- <navigator class="transparent-content-li" hover-class="none" url="/pagesA/batteryReport/batteryReport"> -->
							<!-- 未开发 -->
							<!-- <navigator class="transparent-content-li" hover-class="none" @click="isShowtoast">
								<view class="transparent-content-item">
									<view class="transparent-content-item-icon">
										<image src="../../static/tab/car_battery.png" mode="aspectFit"></image>
									</view>
									<view class="transparent-content-item-text">电池报告</view>
								</view>
							</navigator> -->
							<!-- <navigator class="transparent-content-li" hover-class="none" url="/pagesA/actualMileage/actualMileage" > -->
							<!-- <navigator class="transparent-content-li" hover-class="none" @click="isShowtoast">
								<view class="transparent-content-item">
									<view class="transparent-content-item-icon">
										<image src="../../static/tab/car_mileage.png" mode="aspectFit"></image>
									</view>
									<view class="transparent-content-item-text">真实里程</view>
								</view>
							</navigator> -->
							
							<navigator class="transparent-content-li" hover-class="none" url="/pagesB/wbRecord/wbRecord">
								<!-- <navigator class="transparent-content-li" hover-class="none" @click="isShowtoast"> -->
								<view class="transparent-content-item">
									<view class="transparent-content-item-icon">
										<image src="../../static/tab/car_maintenance.png" mode="aspectFit"></image>
									</view>
									<view class="transparent-content-item-text">维保记录</view>
								</view>
							</navigator>
							<!-- <navigator class="transparent-content-li" hover-class="none" url="/pagesB/commercialCarValuation/commercialCarValuation" @click="isShowtoast"> -->
							<navigator class="transparent-content-li" hover-class="none" url="/pagesB/carTesting/carTesting">
								<view class="transparent-content-item">
									<view class="transparent-content-item-icon">
										<image src="../../static/tab/car_valuation.png" mode="aspectFit"></image>
									</view>
									<view class="transparent-content-item-text">车辆检测</view>
								</view>
							</navigator>
							<navigator class="transparent-content-li" hover-class="none" url="/pagesB/complainSelect/complainSelect">
								<view class="transparent-content-item">
									<view class="transparent-content-item-icon">
										<image src="../../static/tab/car_complaints.png" mode="aspectFit"></image>
									</view>
									<view class="transparent-content-item-text">投诉查询</view>
								</view>
							</navigator>
							<navigator class="transparent-content-li" hover-class="none" url="/pagesB/recallSelect/recallSelect">
								<view class="transparent-content-item">
									<view class="transparent-content-item-icon">
										<image src="../../static/tab/car_recall.png" mode=""></image>
									</view>
									<view class="transparent-content-item-text">召回查询</view>
								</view>
							</navigator>
							<navigator class="transparent-content-li" hover-class="none" url="/pagesA/calculator/dk_calculator">
								<view class="transparent-content-item">
									<view class="transparent-content-item-icon">
										<image src="../../static/tab/dkjsq.png" mode=""></image>
									</view>
									<view class="transparent-content-item-text">贷款计算器</view>
								</view>
							</navigator>
							<navigator class="transparent-content-li" hover-class="none" url="/pagesB/query/violationQuery">
								<view class="transparent-content-item">
									<view class="transparent-content-item-icon">
										<image src="../../static/tab/wzcx.png" mode="aspectFit"></image>
									</view>
									<view class="transparent-content-item-text">违章查询</view>
								</view>
							</navigator>
							<navigator class="transparent-content-li" hover-class="none" url="/pagesA/calculator/cj_calculator">
								<view class="transparent-content-item">
									<view class="transparent-content-item-icon">
										<image src="../../static/tab/njjsq.png" mode=""></image>
									</view>
									<view class="transparent-content-item-text">年检计算器</view>
								</view>
							</navigator>
						</view>
					</view>
                    <view id="demo2" class="scroll-view-item_H">
						<view class="transparent-content">
						<!-- <navigator class="transparent-content-li" hover-class="none" @click="isShowtoast">
							<view class="transparent-content-item">
								<view class="transparent-content-item-icon">
									<image src="../../static/tab/cxjsq.png" mode="aspectFit"></image>
								</view>
								<view class="transparent-content-item-text">车险计算器</view>
							</view>
						</navigator> -->
						<!-- <navigator class="transparent-content-li" hover-class="none" @click="isShowtoast">
							<view class="transparent-content-item">
								<view class="transparent-content-item-icon">
									<image src="../../static/tab/ybjsq.png" mode=""></image>
								</view>
								<view class="transparent-content-item-text">延保计算器</view>
							</view>
						</navigator> -->
					<!-- 	<navigator class="transparent-content-li" hover-class="none" @click="isShowtoast">
							<view class="transparent-content-item">
								<view class="transparent-content-item-icon">
									<image src="../../static/tab/dyjsq.png" mode=""></image>
								</view>
								<view class="transparent-content-item-text">抵押计算器</view>
							</view>
						</navigator> -->
						
						<navigator class="transparent-content-li" hover-class="none" url="/pagesB/query/limitedQuery">
							<view class="transparent-content-item">
								<view class="transparent-content-item-icon">
									<image src="../../static/tab/xqcx.png" mode=""></image>
								</view>
								<view class="transparent-content-item-text">限迁查询</view>
							</view>
						</navigator>
							</view>
					</view>
                </scroll-view>
				<view class="buttoms">
					<view :class="scrollLeft<=25?'active1':''"></view>
					<view :class="scrollLeft>25?'active1':''"></view>
				</view>
            </view>
	</view>
</template>

<script>
	export default {
		name: "transparent",
		data() {
			return {
				list: [{
					name: ''
				}, {
					name: ''
				}],
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				scrollLeft:0
			};
		},
		methods: {
			//功能正在开发
			isShowtoast() {
				uni.showToast({
					title: '功能正在开发中,敬请期待',
					icon: 'none'
				})
			},
			scroll: function(e) {
				// console.log( e.detail)
				this.scrollLeft = e.detail.scrollLeft
				this.old.scrollTop = e.detail.scrollTop
			},
		}
	}
</script>

<style scoped lang="scss">
	.tmck{
		font-size: 36rpx;
		color: #2C2C2C;
		padding: 32rpx 32rpx 0;
	}
	.scroll-view_H{
		width: 100%;
		white-space: nowrap;
		.scroll-view-item_H{
			display: inline-block;
			width: 100%;
			// padding: 20rpx 0;
		}
	}
	.bottom {
		width: 200rpx;
		margin: auto;
		display: flex;
		justify-content: space-between;
		padding-bottom: 15rpx;

		view {
			width: 45%;
			height: 2rpx;
			border-radius: 3px;
			background: #ACB9C8;
		}

		.active {
			background: #002B56 !important;
		}
	}

	.transparent {
		background-color: $uni-bg-color;
		margin: 10rpx 0;

		// border-radius: 10rpx;
		.transparent-top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: $uni-widthspace;
			box-sizing: border-box;

			// border-bottom: 1px solid #e6e6e6;
			.transparent-top-title {
				font-size: 36rpx;
				font-weight: bolder;
				color: #333;
			}

			.transparent-top-text {
				font-size: 24rpx;
				height: 40rpx;
				line-height: 40rpx;
				display: flex;
				align-items: center;
				background-color: #0e2a53;
				border-radius: 40rpx;
				color: #fff;
				padding: 2rpx 10rpx;
			}
		}

		.transparent-content {
			display: flex;
			// justify-content: space-between;
			align-items: center;
			padding: 0 20rpx 30rpx;
			box-sizing: border-box;
			flex-wrap: wrap;

			.transparent-content-li {
				width: 25%;

				.transparent-content-item {
					width: 100%;
					text-align: center;
					margin-top: 30rpx;

					.transparent-content-item-icon {
						image {
							width: 82rpx;
							height: 82rpx;
						}
					}

					.transparent-content-item-text {
						font-size: 24rpx;
						color: #2c2c2c;
					}
				}
			}
		}
	}
	.buttoms{
		width: 138rpx;
		margin: auto;
		display: flex;
		justify-content: space-between;
		// margin-bottom: 30rpx;
		height: 30rpx;
		view{
			width: 40%;
			height: 3rpx;
			background-color: #CCDCFF ;
		}
	}
	.active1{
		background-color: #5789FD !important;
	}
</style>
